<template>
  <div class="width hello">
    <div class="nav">
      <a href="#/"><i class="fa fa-angle-left"></i></a>
      注册
    </div>
    <div class="login-con">
        <form action="" name="zhuceForm" @submit.prevent="postForm">
            <x-input class="input" v-model="datas.name" name="name" placeholder="请输入姓名" is-type="china-name"></x-input><br>
            <x-input class="input" v-model="datas.phone" name="phone" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input><br>
            <x-input class="input" v-model="datas.password" type="password" name="password" placeholder="请输入密码" :min="6" :max="18"></x-input><br>
          <button type="submit">注册</button>
        </form>
        <a href="#/login">有账号 直接登录</a>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { XInput, Group, XButton, Cell } from 'vux'
  export default{
    components: {
    XInput,
    XButton,
    Group,
    Cell
  },
    data:function(){
      return {
        datas:{}
      }
    },
    mounted:function(){
      
    },
    methods:{
      postForm:function(){
        // console.log(this.datas);
        axios.post('los/zhuce',this.datas).then(function(result){
          // console.log('------',result);
          if(result.data.error == 0){
             alert(result.data.message)
             location.href="#/login"
          }else{
            alert(result.data.message);
          }
         
        }).catch(function(err){
          console.log(err);
        })
      }
    }
  }
</script>
<style scoped>
  button{
    border:none;
    width: 100%;
    line-height: 40px;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 8px;
    color: #fff;
    background: #aaa;
  }
  .login-con{
    padding: 10px 30px;
  }
  .input{
    border: 1px solid #ccc;
    border-radius: 25px;
  }
  .nav{
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    overflow: hidden;
    text-align: center;
    padding: 0 15px;
    font-size: 16px;
  }
  .nav i{
    float: left;
    font-size: 28px;
    margin-top: 5px;
    color: #666;
  }

  
</style>